import {Button, Col, Form, Input, message, Row, Select} from "antd";
import {GetTaskCategory, GetTaskList} from "../../services/laike/task";
import {AddSearchForm, SetCateGoryList} from "../../store/reducers/task-reducer";
import store from "../../store";
import React from "react";

function Search(props) {

    let [categoryOptions,setC]= React.useState([])

    React.useEffect(()=>{
        // 请求获取类别列表
        GetTaskCategory().then((res)=>{
            let data = res.data

            // 循环组装Select元素
            let temp = []
            temp = data.category.map((item,index)=>(
                <Select.Option key={index} value={item}>{item}</Select.Option>
            ))

            setC(temp)

            // 把任务类别放到redux
            store.dispatch(SetCateGoryList(data.category))

        })

    },[])

    // 提交表单
    const onFinish = (params) => {

        if (isNaN(params.Id) || params.Id === ''){
            params.Id = undefined
        }

        // 把搜索条件保存到redux
        store.dispatch(AddSearchForm(params))

        GetTaskList(params).then(res => {

            let data = res.data
            if (data.Code !== 200) {
                message.error("请求失败", data.Msg)
            }

            props.reFreshTable(data.Data)
        }).catch(error => {
            message.error("请求失败", error)
        })
    }

    // eslint-disable-next-line
    const showForm = ({}) => {
        props.showForm({})
    }

    return (
        <>
            <Form autoComplete="off" onFinish={onFinish} >
                <Row gutter={24}>
                    <Col span={3}>
                        <Form.Item label="Id" name="Id" type="number">
                            <Input/>
                        </Form.Item>
                    </Col>
                    <Col span={3}>
                        <Form.Item label="类别" name="Category" type="number">
                            <Select  filterOption={false}>
                                {categoryOptions}
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item label="描述_%Like%" name="Desc">
                            <Input />
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item label="Func键值_%Like%" name="FuncName">
                            <Input/>
                        </Form.Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={24}>
                        <Button type="primary" htmlType="submit">
                            搜索
                        </Button>
                        &nbsp;
                        <Button onClick={() => {
                            showForm({})
                        }}>新增</Button>
                    </Col>
                </Row>
            </Form>
        </>
    )
}

export default Search